<template>
  <div class="travel-guide">
    <NavBar activeComponent = 'strategy'/>
    <!-- 简化后的封面 -->
    <div class="hero-banner">
      <img :src="'/api/placeholder/1440/480'" alt="景点封面图" class="hero-image" />
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <h1 class="hero-title">{{ tripData.destination }}</h1>
        <div class="hero-subtitle">{{ tripData.duration }}</div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧主内容 -->
        <div class="main-column">
          <!-- 行程概览 - 新增的信息卡片 -->
          <section class="section trip-overview">
            <h2 class="section-title">
              <i class="fas fa-info-circle"></i>
              行程概览
            </h2>

            <!-- 行程元信息 -->
            <div class="trip-meta-cards">
              <div class="meta-card">
                <div class="meta-icon"><i class="fas fa-calendar-alt"></i></div>
                <div class="meta-content">
                  <div class="meta-label">行程天数</div>
                  <div class="meta-value">{{ tripData.duration }}</div>
                </div>
              </div>

              <div class="meta-card">
                <div class="meta-icon"><i class="fas fa-tag"></i></div>
                <div class="meta-content">
                  <div class="meta-label">出行方式</div>
                  <div class="meta-value">舒适出行</div>
                </div>
              </div>

              <div class="meta-card">
                <div class="meta-icon"><i class="fas fa-users"></i></div>
                <div class="meta-content">
                  <div class="meta-label">行程类型</div>
                  <div class="meta-value">通用行程</div>
                </div>
              </div>

              <div class="meta-card">
                <div class="meta-icon"><i class="fas fa-hiking"></i></div>
                <div class="meta-content">
                  <div class="meta-label">行程强度</div>
                  <div class="meta-value">中等强度</div>
                </div>
              </div>
            </div>

          </section>
          <!-- 目的地简介 -->
          <section class="section destinations-intro">
            <h2 class="section-title">
              <i class="fas fa-info-circle"></i>
              目的地简介
            </h2>
            <div class="destination-carousel">
              <div class="carousel-container">
                <div class="carousel-track" :style="{ transform: `translateX(-${activeSlide * 100}%)` }">
                  <div v-for="(destination, index) in getDestinationInfo()"
                       :key="index"
                       class="carousel-slide">
                    <div class="destination-card">
                      <div class="destination-image">
                        <img :src="destination.image || '/api/placeholder/360/240'" :alt="destination.name">
                      </div>
                      <div class="destination-content">
                        <h3 class="destination-name">{{ destination.name }}</h3>
                        <p class="destination-description">{{ destination.description }}</p>
                        <div class="destination-features">
                          <div v-for="(feature, fIndex) in destination.features" :key="fIndex" class="feature-item">
                            <i :class="feature.icon"></i>
                            <span>{{ feature.name }}:</span>
                            <span class="feature-value">{{ feature.value }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-controls">
                <button @click="prevSlide" class="carousel-control prev">
                  <i class="fas fa-chevron-left"></i>
                </button>
                <div class="carousel-indicators">
                  <button
                      v-for="(_, index) in getDestinationInfo()"
                      :key="index"
                      :class="['indicator', activeSlide === index ? 'active' : '']"
                      @click="goToSlide(index)">
                  </button>
                </div>
                <button @click="nextSlide" class="carousel-control next">
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </section>
          <!-- 行程概览 -->
          <section class="section overview-section">
            <h2 class="section-title">
              <i class="fas fa-map-marked-alt"></i>
              行程概览
            </h2>
            <div class="overview-map">
              <img :src="'/api/placeholder/800/300'" alt="路线地图" class="map-img">
              <div class="route-info">
                <div class="route-stop" v-for="(day, index) in tripData.days" :key="index">
                  <div class="route-day">第{{ day.day }}天</div>
                  <div class="route-title">{{ day.title }}</div>
                </div>
              </div>
            </div>

            <!-- 出行提示 -->
            <div class="tips-container">
              <h3>出行提示</h3>
              <ul class="tips-list">
                <li v-for="(note, index) in tripData.notes" :key="index">
                  <i class="fas fa-check-circle"></i>
                  <span>{{ note }}</span>
                </li>
              </ul>
            </div>
          </section>

          <!-- 费用汇总 -->
          <section class="section cost-summary-section">
            <h2 class="section-title">
              <i class="fas fa-wallet"></i>
              费用汇总
            </h2>
            <div class="cost-cards">
              <!-- 遍历顶级费用项 -->
              <template v-for="(value, key) in filteredCostSummary" :key="key">
                <!-- 对于对象类型的费用项（如transport），进一步遍历其子项 -->
                <template v-if="typeof value === 'object'">
                  <div class="cost-card" v-for="(subValue, subKey) in value" :key="`${key}-${subKey}`">
                    <div class="cost-icon">
                      <i :class="getCostSubIcon(key, subKey)"></i>
                    </div>
                    <div class="cost-detail">
                      <div class="cost-type">{{ getCostSubLabel(key, subKey) }}</div>
                      <div class="cost-value">{{ subValue }}</div>
                    </div>
                  </div>
                </template>
                <!-- 对于非对象类型的费用项，直接显示 -->
                <template v-else>
                  <div class="cost-card">
                    <div class="cost-icon">
                      <i :class="getCostIcon(key)"></i>
                    </div>
                    <div class="cost-detail">
                      <div class="cost-type">{{ getCostLabel(key) }}</div>
                      <div class="cost-value">{{ value }}</div>
                    </div>
                  </div>
                </template>
              </template>
            </div>
            <div class="total-cost">
              <div class="total-label">总费用预算 (人均)</div>
              <div class="total-value">{{ tripData.cost_summary.total }}</div>
            </div>
          </section>

          <!-- 每日行程 -->
          <section class="section itinerary-section">
            <h2 class="section-title">
              <i class="fas fa-map-marked-alt"></i>
              每日行程
            </h2>

            <div v-for="(day, dayIndex) in tripData.days" :key="dayIndex" class="day-container" :data-day="day.day">
              <div class="day-header" @click="toggleDayExpand(dayIndex)">
                <div class="day-number">Day {{ day.day }}</div>
                <div class="day-title">{{ day.title }}</div>
                <div class="day-toggle">
                  <i :class="['fas', expandedDays[dayIndex] ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                </div>
              </div>

              <!-- 折叠状态下的路线摘要 -->
              <div v-if="!expandedDays[dayIndex]" class="route-summary">
                <div class="route-points">
                  <template v-for="(item, itemIndex) in getDayRoutePoints(day)" :key="'point-'+itemIndex">
                    <div class="route-point">
                      <div class="point-icon">
                        <i :class="getActivityIcon(item.type)"></i>
                      </div>
                      <div class="point-name">{{ item.name }}</div>
                    </div>
                    <div v-if="itemIndex < getDayRoutePoints(day).length - 1" class="route-arrow" :key="'arrow-'+itemIndex">
                      <i class="fas fa-long-arrow-alt-right"></i>
                    </div>
                  </template>
                </div>
              </div>

              <!-- 展开状态下的详细时间轴 -->
              <div v-if="expandedDays[dayIndex]" class="timeline">
                <div v-for="(item, itemIndex) in day.schedule"
                     :key="itemIndex"
                     class="timeline-item"
                     :id="`day-${day.day}-item-${itemIndex}`">
                  <div class="timeline-time">
                      <span class="time-range">
                        {{ item.time.split(' - ')[0] }} - {{ item.time.split(' - ')[1] }}
                      </span>
                  </div>
                  <div class="timeline-content">
                    <div class="timeline-dot">
                      <i :class="getActivityIcon(item.activity)"></i>
                    </div>

                    <div class="timeline-card">
                      <div class="activity-header" @click="toggleItemCollapse(dayIndex, itemIndex)">
                        <h3>{{ item.activity }}</h3>
                        <div class="activity-summary">
                          <!-- 折叠时显示的简要信息 -->
                          <span v-if="item.activity === '火车' || item.activity === '交通'">
                              {{ getSelectedOption(dayIndex, itemIndex).from }} → {{ getSelectedOption(dayIndex, itemIndex).to }}
                            </span>
                          <span v-else-if="item.activity === '景点'">
                              {{ item.details.name }}
                            </span>
                          <span v-else-if="['早餐', '午餐', '晚餐'].includes(item.activity)">
                              {{ getSelectedOption(dayIndex, itemIndex).location }}
                            </span>
                          <span v-else-if="item.activity === '住宿'">
                              {{ getSelectedOption(dayIndex, itemIndex).hotel }}
                            </span>
                        </div>
                        <!-- 折叠/展开图标 -->
                        <div class="collapse-toggle">
                          <i :class="['fas', isItemCollapsed(dayIndex, itemIndex) ? 'fa-chevron-down' : 'fa-chevron-up']"></i>
                        </div>
                      </div>
                      <div v-if="!isItemCollapsed(dayIndex, itemIndex)" class="activity-details">
                        <!-- 景点详情 -->
                        <div v-if="item.activity === '景点'" class="attraction-details" :data-attraction="item.details.name">
                          <div class="highlights">
                            <h4>亮点景观</h4>
                            <div class="highlight-tags">
                              <span v-for="(highlight, hIndex) in item.details.highlights" :key="hIndex" class="highlight-tag">
                                {{ highlight }}
                              </span>
                            </div>
                          </div>
                          <div class="attraction-info">
                            <div class="info-item">
                              <i class="fas fa-clock"></i>
                              <span>游览时间: {{ item.details.duration }}</span>
                            </div>
                            <div class="info-item">
                              <i class="fas fa-ticket-alt"></i>
                              <span>门票: {{ item.details.ticket }}</span>
                            </div>
                            <div class="info-item" v-if="item.details.cable_car">
                              <i class="fas fa-mountain"></i>
                              <span>缆车: {{ item.details.cable_car }}</span>
                            </div>
                            <div class="info-item" v-if="item.details.boat_ticket">
                              <i class="fas fa-ship"></i>
                              <span>船票: {{ item.details.boat_ticket }}</span>
                            </div>
                          </div>

                          <!-- 景点提示 -->
                          <div class="tip-content" v-if="item.details.tips">
                            <i class="fas fa-lightbulb"></i>
                            <p>{{ item.details.tips }}</p>
                          </div>
                        </div>

                        <!-- 选项卡 (交通、餐饮、住宿等) -->
                        <div v-if="item.details.options" class="options-container">
                          <div class="tabs">
                            <div
                                v-for="(option, oIndex) in item.details.options"
                                :key="oIndex"
                                class="tab"
                                :class="{ active: selectedOptions[dayIndex + '-' + itemIndex] === oIndex }"
                                @click="selectOption(dayIndex, itemIndex, oIndex)"
                            >
                              选项 {{ oIndex + 1 }}
                            </div>
                          </div>

                          <div class="option-details" v-if="item.details.options.length > 0">
                            <div class="selected-option">
                              <div v-if="item.activity === '火车'" class="train-option">
                                <div class="option-row">
                                  <div class="option-label">车次</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).train }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">出发</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).from }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">到达</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).to }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">价格</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).price }}</div>
                                </div>
                                <div class="option-row" v-if="getSelectedOption(dayIndex, itemIndex).duration">
                                  <div class="option-label">时长</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).duration }}</div>
                                </div>
                                <div class="tip-content" v-if="getSelectedOption(dayIndex, itemIndex).tips || getSelectedOption(dayIndex, itemIndex).recommendation">
                                  <i class="fas fa-lightbulb"></i>
                                  <p>{{ getSelectedOption(dayIndex, itemIndex).tips || getSelectedOption(dayIndex, itemIndex).recommendation }}</p>
                                </div>
                              </div>

                              <div v-if="item.activity === '交通'" class="transport-option">
                                <div class="option-row">
                                  <div class="option-label">方式</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).type }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">出发</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).from }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">到达</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).to }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">时长</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).duration }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">价格</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).cost }}</div>
                                </div>
                                <div class="tip-content" v-if="getSelectedOption(dayIndex, itemIndex).tips">
                                  <i class="fas fa-lightbulb"></i>
                                  <p>{{ getSelectedOption(dayIndex, itemIndex).tips }}</p>
                                </div>
                              </div>

                              <div v-if="item.activity === '早餐' || item.activity === '午餐' || item.activity === '晚餐'" class="meal-option">
                                <div class="option-row">
                                  <div class="option-label">地点</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).location }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">推荐</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).recommendation }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">菜单</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).menu.join(', ') }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">价格</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).cost }}</div>
                                </div>
                                <div class="tip-content" v-if="getSelectedOption(dayIndex, itemIndex).tips">
                                  <i class="fas fa-lightbulb"></i>
                                  <p>{{ getSelectedOption(dayIndex, itemIndex).tips }}</p>
                                </div>
                              </div>

                              <div v-if="item.activity === '住宿'" class="hotel-option">
                                <div class="option-row">
                                  <div class="option-label">酒店</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).hotel }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">评级</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).rating }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">价格</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).price }}</div>
                                </div>
                                <div class="option-row">
                                  <div class="option-label">退房</div>
                                  <div class="option-value">{{ getSelectedOption(dayIndex, itemIndex).checkout }}</div>
                                </div>
                                <div class="tip-content" v-if="getSelectedOption(dayIndex, itemIndex).tips">
                                  <i class="fas fa-lightbulb"></i>
                                  <p>{{ getSelectedOption(dayIndex, itemIndex).tips }}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- 新增：右侧边栏 -->
        <div class="sidebar-column">
          <!-- 这里添加右侧功能按钮和目录 -->
          <!-- 功能按钮区 -->
          <div class="function-buttons">
            <div class="function-button">
              <div class="button-icon"><i class="fas fa-edit"></i></div>
              <div class="button-count">37</div>
              <div class="button-label">编辑</div>
            </div>
            <div class="function-button">
              <div class="button-icon"><i class="fas fa-star"></i></div>
              <div class="button-count">11003</div>
              <div class="button-label">收藏</div>
            </div>
            <!-- 更多功能按钮... -->
          </div>

          <!-- 攻略目录 -->
          <div class="sidebar-section table-of-contents">
            <h3 class="sidebar-title">攻略目录</h3>
            <!-- 目录列表 -->
            <ul class="toc-list">
              <li v-for="(item) in getTableOfContents()"
                  :key="item.id"
                  class="toc-item"
                  :class="{
          'active': item.isActive,
          'day-header': item.isDayHeader
        }">
                <a :href="item.link"
                   class="toc-link"
                   :title="item.title"
                   @click="(event) => handleTocClick(event, item)">
                  <!-- 如果是活动项，添加对应图标 -->
                  <i v-if="!item.isDayHeader"
                     :class="getActivityIcon(item.activity)"
                     class="toc-icon"></i>
                  {{ item.title }}
                </a>
              </li>
            </ul>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
// 在script开始部分添加import
import { ElTimeline, ElTimelineItem, ElCard } from 'element-plus'
import NavBar from "@/components/NavBar.vue";

export default {
  name: 'TravelGuide',
  components: {NavBar},
  data() {
    return {
      paramValue: ''
    };
  },
  created() {
    // 获取路由参数
    this.paramValue = this.$route.params.id;
  },
  props: {
    // 如果您想从外部传入tripData，可以使用props
    initialData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 获取当前路由
    const route = useRoute();

    // 响应式状态管理
    const expandedDays = reactive({});    // 控制日期折叠/展开状态
    const selectedOptions = reactive({});  // 保存选中的选项

    // 尝试从URL查询参数获取aiResponse
    let initialTripData = {};

    // 如果URL中有aiResponse参数，优先使用它
    if (route.query.aiResponse) {
      try {
        initialTripData = JSON.parse(route.query.aiResponse);
        console.log("成功从URL查询参数加载行程数据");
      } catch (error) {
        console.error("解析aiResponse数据失败:", error);
        // 解析失败时，继续使用其他数据源
      }
    }

    // 如果aiResponse为空，则尝试使用props中的数据
    if (Object.keys(initialTripData).length === 0 && Object.keys(props.initialData).length > 0) {
      initialTripData = this.initialData;
      console.log("使用props传入的行程数据");
    }

    // 这里是tripData，实际项目中可以从props接收或从API获取
    // 为简化展示，仅显示一个注释，实际使用时请替换为您的完整JSON数据
    // 您可以使用 props.initialData 或直接从文件导入:
    const tripData = reactive(
        Object.keys(initialTripData).length > 0
            ? initialTripData
            : {
      "duration": "5天4晚",
      "destination": "成都+乐山",
      "days": [
        {
          "day": 1,
          "title": "成都·城市探秘 → 文殊院+U37创意仓库",
          "schedule": [
            {
              "time": "09:30 - 10:00",
              "activity": "早餐",
              "details": {
                "options": [
                  {
                    "location": "青羊区文殊院街39号",
                    "recommendation": "洞子口张老二凉粉",
                    "menu": ["甜水面", "黄凉粉"],
                    "cost": "15元/人",
                    "tips": "早到免排队"
                  }
                ]
              }
            },
            {
              "time": "10:30 - 12:30",
              "activity": "景点",
              "details": {
                "name": "文殊院",
                "highlights": ["千佛和平塔", "茶园禅意"],
                "duration": "2小时",
                "ticket": "免费",
                "opening_hours": "08:00 - 17:00",
                "tips": "可请香火但勿随意拍照"
              }
            },
            {
              "time": "13:00 - 14:00",
              "activity": "午餐",
              "details": {
                "options": [
                  {
                    "location": "锦江区红星路四段",
                    "recommendation": "无名冒菜",
                    "menu": ["牛肉冒菜", "脑花"],
                    "cost": "35元/人",
                    "tips": "仅限堂食"
                  }
                ]
              }
            },
            {
              "time": "15:00 - 17:30",
              "activity": "景点",
              "details": {
                "name": "U37创意仓库",
                "highlights": ["工业风摄影", "独立咖啡馆"],
                "duration": "2.5小时",
                "ticket": "免费",
                "tips": "10号楼天台可拍全景"
              }
            },
            {
              "time": "19:30 - 21:00",
              "activity": "晚餐",
              "details": {
                "options": [
                  {
                    "location": "武侯区玉林西路",
                    "recommendation": "飘香火锅",
                    "menu": ["鲜毛肚", "鸭血"],
                    "cost": "80元/人",
                    "tips": "提前2小时取号"
                  }
                ]
              }
            },
            {
              "time": "21:30",
              "activity": "游玩",
              "details": {
                "name": "九眼桥夜景",
                "highlights": ["安顺廊桥灯光秀"],
                "duration": "1小时",
                "tips": "沿河步行更佳"
              }
            }
          ]
        },
        {
          "day": 2,
          "title": "成都 → 青城后山+普照寺",
          "schedule": [
            {
              "time": "07:30 - 09:00",
              "activity": "交通",
              "details": {
                "options": [
                  {
                    "type": "城际高铁",
                    "from": "成都犀浦站",
                    "to": "青城山站",
                    "duration": "30分钟",
                    "cost": "10元",
                    "tips": "建议购买无座票"
                  },
                  {
                    "type": "景区直通车",
                    "from": "青城山站",
                    "to": "后山入口",
                    "duration": "40分钟",
                    "cost": "20元",
                    "tips": "滚动发车"
                  }
                ]
              }
            }
          ]
        }
      ],
      "cost_summary": {
        "transport": {
          "train": "200-250元",
          "taxi": "300-400元",
          "bus": "80-100元"
        },
        "accommodation": "2000-2400元",
        "meals": "1500-1800元",
        "tickets": "400-500元",
        "total": "4500-5500元/人"
      },
      "notes": [
        "高铁票需提前15天在12306预订",
        "青城山徒步需准备防滑鞋",
        "乐山美食偏辣，可要求少辣",
        "峨眉山猴子勿主动投喂"
      ]
    });
    // 滚动处理函数
    const handleScroll = () => {
      // 获取所有可能的活动项元素
      const itemElements = document.querySelectorAll('.timeline-item');
      const dayElements = document.querySelectorAll('.day-container');

      // 找到当前视口中最靠上的元素
      let closestElement = null;
      let minDistance = Infinity;
      let viewportHeight = window.innerHeight;
      let viewportCenter = viewportHeight / 3; // 大约在视口上部1/3处

      // 检查活动项元素
      itemElements.forEach(element => {
        const rect = element.getBoundingClientRect();
        // 计算元素中心到视口上部1/3处的距离
        const distance = Math.abs(rect.top + rect.height/2 - viewportCenter);

        if (distance < minDistance && rect.top < viewportHeight/2) {
          minDistance = distance;
          closestElement = element;
        }
      });

      // 如果找到最近的元素，更新目录激活状态
      if (closestElement) {
        const id = closestElement.id;
        if (id) {
          updateActiveTocItem(id);
        }
      }
      // 如果没找到活动项，检查日期容器
      else if (dayElements.length > 0) {
        dayElements.forEach(element => {
          const rect = element.getBoundingClientRect();
          const distance = Math.abs(rect.top - viewportCenter);

          if (distance < minDistance && rect.top < viewportHeight/2) {
            minDistance = distance;
            closestElement = element;
          }
        });

        if (closestElement) {
          const dayNumber = closestElement.getAttribute('data-day');
          if (dayNumber) {
            updateActiveTocItem(`day-${dayNumber}`);
          }
        }
      }
    };

    // 初始化所有天为折叠状态，选中第一个选项
    onMounted(() => {
      // 初始化所有项目为折叠状态s
      tripData.days.forEach((day, dayIndex) => {
        day.schedule.forEach((item, itemIndex) => {
          collapsedItems[`${dayIndex}-${itemIndex}`] = true;
        });
      });
      autoplayInterval = setInterval(nextSlide, 5000);
      tripData.days.forEach((day, dayIndex) => {
        // 默认展开第一天
        expandedDays[dayIndex] = dayIndex === 0;

        // 初始化选项，默认选择第一个选项
        day.schedule.forEach((item, itemIndex) => {
          if (item.details.options) {
            selectedOptions[dayIndex + '-' + itemIndex] = 0;
          }
        });
      });
      // 初始化目录状态
      const toc = getTableOfContents();
      // 默认激活第一项
      if (toc.length > 0) {
        updateActiveTocItem(toc[0].id);
      }

      // 添加滚动监听
      window.addEventListener('scroll', handleScroll);

      // 添加类使侧边栏吸附
      const sidebarColumn = document.querySelector('.sidebar-column');
      if (sidebarColumn) {
        sidebarColumn.classList.add('sticky');
      }

    });
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });

    // 获取行程中的所有城市，用于显示天气
    const getCities = () => {
      const cities = new Set();

      // 从目的地提取城市名称
      tripData.destination.split('+').forEach(city => {
        cities.add(city.trim());
      });

      // 从行程中提取更多城市
      tripData.days.forEach(day => {
        // 从标题中提取城市
        const titleCities = day.title.match(/[\u4e00-\u9fa5]+/g);
        if (titleCities) {
          titleCities.forEach(city => {
            if (city !== '北京') {  // 跳过起始城市"北京"
              cities.add(city);
            }
          });
        }
      });

      return Array.from(cities);
    };

    // 获取城市的天气信息（模拟数据）
    const getWeatherInfo = (city) => {
      const weatherData = {
        '秦皇岛': { temp: '22°C', condition: '晴' },
        '沧州': { temp: '24°C', condition: '多云' },
        '白洋淀': { temp: '23°C', condition: '晴转多云' }
      };

      return weatherData[city] || { temp: '20°C', condition: '晴' };
    };

    // 切换日期展开/折叠
    const toggleDayExpand = (dayIndex) => {
      expandedDays[dayIndex] = !expandedDays[dayIndex];
    };

    // 选择选项
    const selectOption = (dayIndex, itemIndex, optionIndex) => {
      selectedOptions[dayIndex + '-' + itemIndex] = optionIndex;
    };

    // 获取当前选中的选项
    const getSelectedOption = (dayIndex, itemIndex) => {
      const key = dayIndex + '-' + itemIndex;
      const schedule = tripData.days[dayIndex].schedule[itemIndex];
      if (schedule.details.options) {
        const selectedIndex = selectedOptions[key] || 0;
        return schedule.details.options[selectedIndex];
      }
      return {};
    };

    // 获取路线点
    const getDayRoutePoints = (day) => {
      const points = [];

      // 按时间顺序收集主要地点
      day.schedule.forEach(item => {
        if (item.activity === '火车') {
          const selectedOption = item.details.options[selectedOptions[day.day-1 + '-' + day.schedule.indexOf(item)] || 0];
          points.push({
            type: '火车',
            name: selectedOption.from
          });
          points.push({
            type: '火车',
            name: selectedOption.to
          });
        } else if (item.activity === '景点' && item.details.name) {
          points.push({
            type: '景点',
            name: item.details.name
          });
        } else if (item.activity === '住宿') {
          const selectedOption = item.details.options[selectedOptions[day.day-1 + '-' + day.schedule.indexOf(item)] || 0];
          points.push({
            type: '住宿',
            name: selectedOption.hotel
          });
        }
      });

      // 去除重复点
      const uniquePoints = [];
      points.forEach(point => {
        if (!uniquePoints.some(p => p.name === point.name)) {
          uniquePoints.push(point);
        }
      });

      return uniquePoints;
    };

    // 获取活动图标
    const getActivityIcon = (activity) => {
      const icons = {
        '火车': 'fas fa-train',
        '交通': 'fas fa-bus',
        '早餐': 'fas fa-coffee',
        '午餐': 'fas fa-utensils',
        '晚餐': 'fas fa-utensils',
        '景点': 'fas fa-camera',
        '住宿': 'fas fa-bed'
      };
      return icons[activity] || 'fas fa-map-marker-alt';
    };

    // 处理费用汇总显示
    const filteredCostSummary = computed(() => {
      // 排除 total 字段，因为它会单独显示
      const { total, ...rest } = tripData.cost_summary;
      return rest;
    });

    // 获取费用类型标签
    const getCostLabel = (key) => {
      const labels = {
        'accommodation': '住宿',
        'meals': '餐饮',
        'tickets': '门票'
      };
      return labels[key] || key;
    };

    // 获取费用子项标签
    const getCostSubLabel = (key, subKey) => {
      if (key === 'transport') {
        const transportLabels = {
          'train': '火车',
          'taxi': '出租车'
        };
        return transportLabels[subKey] || subKey;
      }
      return subKey;
    };

    // 获取费用图标
    const getCostIcon = (key) => {
      const icons = {
        'accommodation': 'fas fa-hotel',
        'meals': 'fas fa-utensils',
        'tickets': 'fas fa-ticket-alt'
      };
      return icons[key] || 'fas fa-money-bill';
    };

    // 获取费用子项图标
    const getCostSubIcon = (key, subKey) => {
      if (key === 'transport') {
        const transportIcons = {
          'train': 'fas fa-train',
          'taxi': 'fas fa-taxi'
        };
        return transportIcons[subKey] || 'fas fa-bus';
      }
      return getCostIcon(key);
    };
    // 轮播图相关状态
    const activeSlide = ref(0);
    const destinationsCount = computed(() => getDestinationInfo().length);

    // 下一张幻灯片
    const nextSlide = () => {
      activeSlide.value = (activeSlide.value + 1) % destinationsCount.value;
    };

    // 上一张幻灯片
    const prevSlide = () => {
      activeSlide.value = (activeSlide.value - 1 + destinationsCount.value) % destinationsCount.value;
    };

    // 跳转到指定幻灯片
    const goToSlide = (index) => {
      activeSlide.value = index;
    };

    // 自动轮播
    let autoplayInterval = null;




    // 获取目的地信息
    const getDestinationInfo = () => {
      // 这里可以替换为真实数据或API获取
      return [
        {
          name: '秦皇岛',
          image: '/api/placeholder/360/240',
          description: '秦皇岛位于河北省东北部，是中国著名的海滨城市。这里拥有万里长城东端起点山海关、风景优美的北戴河海滨以及雄伟的祖山风景区，是集历史文化与自然风光于一体的旅游胜地。',
          features: [
            { name: '美食特色', value: '海鲜、渔家菜', icon: 'fas fa-utensils' },
            { name: '最佳季节', value: '4-10月', icon: 'fas fa-sun' },
            { name: '人文景观', value: '山海关、老龙头', icon: 'fas fa-monument' }
          ]
        },
        {
          name: '山海关',
          image: '/api/placeholder/360/240',
          description: '山海关是明长城东端起点，素有"天下第一关"之称。这里历史文化底蕴深厚，是明代九边重镇中唯一一个建在平原上的军事要塞，古城保存完好，是体验古代军事文化的绝佳去处。',
          features: [
            { name: '地标景点', value: '天下第一关', icon: 'fas fa-landmark' },
            { name: '推荐游览', value: '2-3小时', icon: 'fas fa-clock' },
            { name: '历史文化', value: '明代军事防御体系', icon: 'fas fa-history' }
          ]
        },
        {
          name: '沧州',
          image: '/api/placeholder/360/240',
          description: '沧州位于河北省中部，是一座有着深厚历史文化底蕴的城市。这里的白洋淀风景区是华北地区最大的淡水湖泊湿地，有"北方的江南水乡"美誉，以其壮观的芦苇荡和丰富的水生态系统闻名。',
          features: [
            { name: '特色美食', value: '狗不理包子、沧州卤驴肉', icon: 'fas fa-utensils' },
            { name: '传统艺术', value: '武术、杂技', icon: 'fas fa-theater-masks' },
            { name: '自然风光', value: '白洋淀湿地', icon: 'fas fa-leaf' }
          ]
        },
        {
          name: '白洋淀',
          image: '/api/placeholder/360/240',
          description: '白洋淀是华北地区最大的淡水湖泊，由143个大小不等的淀泊组成，总面积约366平方公里。这里水草丰茂，芦苇成荫，是多种珍稀水鸟和鱼类的栖息地，也是著名的"雁翎队"革命历史发源地之一。',
          features: [
            { name: '特色体验', value: '荷花观赏、芦苇荡游船', icon: 'fas fa-ship' },
            { name: '最佳时节', value: '6-9月荷花盛开季节', icon: 'fas fa-calendar-alt' },
            { name: '当地特产', value: '白洋淀鱼、莲子、芦苇工艺品', icon: 'fas fa-shopping-basket' }
          ]
        }
      ];
    };
    // 提取目录内容
    // 提取目录内容
    const getTableOfContents = () => {
      const toc = [];

      // 从每日行程中提取全部活动条目
      tripData.days.forEach((day, dayIndex) => {
        // 先添加日期标题
        toc.push({
          id: `day-${day.day}`,
          title: `第${day.day}天：${day.title}`,
          link: `#day-${day.day}`,
          isActive: dayIndex === 0, // 默认第一天活跃
          isDayHeader: true // 标记为日期标题
        });

        // 添加该日的所有活动
        day.schedule.forEach((item, itemIndex) => {
          let itemTitle = '';

          // 根据活动类型构建不同的标题
          if (item.activity === '火车') {
            const selectedOption = getSelectedOption(dayIndex, itemIndex);
            itemTitle = `${selectedOption.from} → ${selectedOption.to}`;
          } else if (item.activity === '交通') {
            const selectedOption = getSelectedOption(dayIndex, itemIndex);
            itemTitle = `${selectedOption.from} → ${selectedOption.to}`;
          } else if (item.activity === '景点') {
            itemTitle = item.details.name;
          } else if (['早餐', '午餐', '晚餐'].includes(item.activity)) {
            const selectedOption = getSelectedOption(dayIndex, itemIndex);
            itemTitle = selectedOption.location;
          } else if (item.activity === '住宿') {
            const selectedOption = getSelectedOption(dayIndex, itemIndex);
            itemTitle = selectedOption.hotel;
          }

          // 只有当有标题内容时才添加到目录
          if (itemTitle) {
            toc.push({
              id: `day-${day.day}-item-${itemIndex}`,
              title: itemTitle,
              link: `#day-${day.day}-item-${itemIndex}`,
              activity: item.activity,
              dayIndex: dayIndex,
              itemIndex: itemIndex,
              isActive: false
            });
          }
        });
      });

      return toc;
    };
    const collapsedItems = reactive({});

    // 切换项目折叠状态
    const toggleItemCollapse = (dayIndex, itemIndex) => {
      const key = `${dayIndex}-${itemIndex}`;
      collapsedItems[key] = !collapsedItems[key];
    };

    // 检查项目是否折叠
    const isItemCollapsed = (dayIndex, itemIndex) => {
      const key = `${dayIndex}-${itemIndex}`;
      return collapsedItems[key] === true;
    };
    // 获取Timeline Item的类型
    const getTimelineItemType = (activity) => {
      const typeMap = {
        '景点': 'primary',
        '火车': 'success',
        '交通': 'info',
        '早餐': 'warning',
        '午餐': 'warning',
        '晚餐': 'warning',
        '住宿': 'danger'
      };
      return typeMap[activity] || 'primary';
    };

    // 获取Timeline Item的图标
    const getTimelineItemIcon = (activity) => {
      const iconMap = {
        '火车': 'el-icon-truck',
        '交通': 'el-icon-van',
        '早餐': 'el-icon-food',
        '午餐': 'el-icon-dish',
        '晚餐': 'el-icon-food',
        '景点': 'el-icon-camera',
        '住宿': 'el-icon-house'
      };
      return iconMap[activity];
    };
    const handleTocClick = (event, item) => {
      event.preventDefault();

      // 如果是日期标题，展开/折叠该日期
      if (item.isDayHeader) {
        const dayIndex = parseInt(item.id.split('-')[1]) - 1;
        toggleDayExpand(dayIndex);

        // 滚动到该日期
        setTimeout(() => {
          const element = document.getElementById(item.id);
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
          }
        }, 100);
      }
      // 如果是具体活动项
      else if (item.dayIndex !== undefined && item.itemIndex !== undefined) {
        // 确保该日期已展开
        expandedDays[item.dayIndex] = true;

        // 如果有折叠状态，则展开该项
        if (typeof collapsedItems[`${item.dayIndex}-${item.itemIndex}`] !== 'undefined') {
          collapsedItems[`${item.dayIndex}-${item.itemIndex}`] = false;
        }

        // 滚动到对应元素
        setTimeout(() => {
          const element = document.getElementById(item.id);
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
          }
        }, 100);
      }

      // 更新活跃状态
      updateActiveTocItem(item.id);
    };

    // 更新当前活跃的目录项
    const updateActiveTocItem = (activeId) => {
      getTableOfContents().forEach(item => {
        item.isActive = (item.id === activeId);
      });
    };



    return {
      initialTripData,
      route,
      tripData,
      expandedDays,
      selectedOptions,
      getCities,
      getWeatherInfo,
      toggleDayExpand,
      selectOption,
      getSelectedOption,
      getDayRoutePoints,
      getActivityIcon,
      filteredCostSummary,
      getCostLabel,
      getCostSubLabel,
      getCostIcon,
      getCostSubIcon,
      activeSlide,
      destinationsCount,
      nextSlide,
      prevSlide,
      goToSlide,
      autoplayInterval,
      getDestinationInfo,
      getTableOfContents,
      collapsedItems,
      toggleItemCollapse,
      isItemCollapsed,
      getTimelineItemType,
      getTimelineItemIcon,
      handleTocClick,
      updateActiveTocItem,
      handleScroll,
    };
  }
};
</script>

<style>
/* 行程概览卡片样式 */
.trip-overview {
  margin-bottom: 30px;
}

.trip-meta-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}

.meta-card {
  background: var(--light-gray);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
}

.meta-icon {
  width: 45px;
  height: 45px;
  background-color: #e6f2ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.meta-icon i {
  color: var(--primary-color);
  font-size: 1.3rem;
}

.meta-label {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 3px;
}

.meta-value {
  font-weight: bold;
  font-size: 1.1rem;
}

/* 天气概览样式 */
.subsection-title {
  font-size: 1.1rem;
  margin: 20px 0 15px;
  display: flex;
  align-items: center;
}

.subsection-title i {
  color: var(--primary-color);
  margin-right: 8px;
}

.weather-overview {
  background: var(--light-gray);
  border-radius: 8px;
  padding: 20px;
}

.weather-cards {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.weather-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  padding: 15px;
  min-width: 120px;
  text-align: center;
  flex-shrink: 0;
}

.weather-city {
  font-weight: bold;
  margin-bottom: 10px;
}

.weather-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  color: #f9d71c;
}

.weather-temp {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.weather-condition {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* 确保内容区在移动设备上仍然美观 */
@media (max-width: 768px) {
  .trip-meta-cards {
    flex-direction: column;
  }

  .meta-card {
    width: 100%;
  }

  .weather-cards {
    gap: 10px;
  }

  .weather-card {
    min-width: 100px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }
}
/* 右侧边栏样式 */
.toc-item.active .toc-link {
  background-color: #e6f2ff;
  color: var(--primary-color);
  font-weight: 500;
}
.sidebar-column {
  width: 300px;
  flex-shrink: 0;
}

/* 功能按钮样式 */
.function-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.function-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.button-icon {
  color: var(--primary-color);
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.button-count {
  font-weight: bold;
  color: var(--text-color);
}

.button-label {
  font-size: 0.8rem;
  color: var(--text-light);
}

/* 侧边栏各部分样式 */
.sidebar-section {
  background: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sidebar-title {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-color);
}

/* 目录样式 */
/* 为目录添加吸附效果 */
.sidebar-column.sticky {
  position: sticky;
  top: 20px; /* 距离顶部的距离 */
  height: calc(100vh - 40px); /* 设置高度为视口高度减去上下边距 */
  overflow-y: auto; /* 内容过多时可滚动 */
}

/* 设置目录区域最大高度，确保在小屏幕上也能完整显示 */
.table-of-contents {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 10px 15px;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}



/* 为日期标题添加特殊样式 */
.toc-item.day-header .toc-link {
  font-weight: bold;
  background-color: #f0f2f5;
  padding: 8px 10px;
  border-left: 3px solid var(--primary-color);
}
.toc-item:not(.day-header) .toc-link:before {
  display: none;
}
/* 添加左侧圆点样式 */
.toc-item:before {
  content: "•";
  color: var(--primary-color);
  font-size: 18px;
  margin-right: 10px;
  line-height: 1.2;
}
/* 图标样式 */
.toc-link i {
  margin-right: 8px;
  width: 20px; /* 固定宽度确保对齐 */
  text-align: center;
  color: var(--primary-color);
}
/* 为活动项添加缩进和图标 */
.toc-item:not(.day-header) .toc-link {
  padding-left: 20px;
  position: relative;
  font-size: 0.9rem;
}
.toc-link {
  display: flex;
  align-items: center;
  padding: 6px 0; /* 移除左右内边距，保留上下内边距 */
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
  flex: 1;
}

.toc-link:hover {
  background-color: #e6f2ff;
  color: var(--primary-color);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .content-container {
    flex-direction: column;
  }

  .sidebar-column {
    width: 100%;
  }
}
/* 目的地轮播图样式 */
.destination-carousel {
  margin-bottom: 20px;
}

.carousel-container {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  flex: 0 0 100%;
}

.destination-card {
  display: flex;
  background-color: var(--light-gray);
  height: 100%;
}

.destination-image {
  width: 40%;
  flex-shrink: 0;
}

.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination-content {
  padding: 20px;
  flex: 1;
}

.destination-name {
  margin: 0 0 12px 0;
  font-size: 1.3rem;
  color: var(--primary-color);
}

.destination-description {
  margin: 0 0 15px 0;
  font-size: 0.95rem;
  color: var(--text-color);
  line-height: 1.6;
}

.destination-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.feature-item i {
  width: 20px;
  color: var(--primary-color);
  margin-right: 8px;
}

.feature-value {
  font-weight: 500;
  margin-left: 5px;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.carousel-control {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.carousel-control:hover {
  background-color: var(--primary-dark);
}

.carousel-indicators {
  display: flex;
  gap: 8px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
}

.indicator.active {
  background-color: var(--primary-color);
}

@media (max-width: 768px) {
  .destination-card {
    flex-direction: column;
  }

  .destination-image {
    width: 100%;
    height: 200px;
  }
}
/* 全局样式 */
.travel-guide {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  background-color: #f5f5f7;
  --primary-color: #0066cc;
  --primary-dark: #0055b3;
  --light-gray: #f8f9fa;
  --border-color: #e0e0e0;
  --text-color: #333;
  --text-light: #666;
}

/* 通用元素样式 */
h2, h3, h4 {
  margin-top: 0;
  color: var(--text-color);
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

/* 沉浸式封面 */
.hero-banner {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: white;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: 1.8rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.meta-item i {
  margin-right: 8px;
}

/* 天气信息 */
.weather-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 8px;
}

.city-weather {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.city-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.weather-details {
  display: flex;
  align-items: center;
}

.weather-details i {
  margin-right: 5px;
  color: #f9d71c;
}

.weather-details span {
  margin-right: 10px;
}

/* 主内容区 */
.main-content {
  padding: 40px 20px;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.content-container {
  display: flex;
  gap: 20px;
}

.main-column {
  flex: 1;
  max-width: 850px; /* 稍微增加主内容宽度 */
  margin: 0 auto; /* 在flex布局中也添加居中 */
}

/* 一般节样式 */
.section {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 25px;
}

.section-title {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.section-title i {
  color: var(--primary-color);
  margin-right: 10px;
}

/* 行程概览 */
.overview-map {
  margin-bottom: 20px;
}

.map-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.route-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.route-stop {
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.route-day {
  background-color: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}

.route-title {
  font-size: 0.9rem;
}

/* 提示列表 */
.tips-container {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.tips-container h3 {
  margin-top: 0;
  color: #505050;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.tips-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tips-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.tips-list i {
  color: var(--primary-color);
  margin-right: 10px;
  margin-top: 3px;
}

/* 费用汇总样式 */
.cost-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.cost-card {
  background: var(--light-gray);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}

.cost-icon {
  width: 40px;
  height: 40px;
  background-color: #e6f2ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.cost-icon i {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.cost-type {
  font-weight: bold;
  margin-bottom: 5px;
}

.total-cost {
  background-color: var(--primary-color);
  color: white;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-weight: bold;
}

.total-value {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 每日行程样式 */
.day-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.day-header {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.day-header:hover {
  background-color: var(--primary-dark);
}

.day-number {
  font-weight: bold;
  font-size: 1.1rem;
  margin-right: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
}

.day-title {
  font-size: 1rem;
  flex: 1;
}

.day-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 路线摘要样式 */
.route-summary {
  padding: 15px;
  background-color: var(--light-gray);
}

.route-points {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.route-point {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 8px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.point-icon {
  width: 24px;
  height: 24px;
  background-color: #e6f2ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.point-icon i {
  color: var(--primary-color);
  font-size: 0.8rem;
}

.point-name {
  font-size: 0.9rem;
  font-weight: 500;
}

.route-arrow {
  color: var(--primary-color);
  font-size: 0.9rem;
}

/* 时间轴样式 */
.timeline {
  position: relative;
  padding: 12px 0 12px 100px; /* 增加左侧padding给时间卡片留出空间 */
}

.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85px; /* 调整竖线位置，与时间卡片对齐 */
  width: 2px;
  background-color: #e6e6e6;
}

.timeline-item {
  display: flex;
  margin-bottom: 15px;
  position: relative;
}

.timeline-item:last-child {
  margin-bottom: 5px;
}

.timeline-time {
  position: absolute;
  left: 0;
  width: 75px;
  text-align: center;
  background-color: #f0f2f5; /* 浅灰色背景 */
  border-radius: 4px;
  padding: 5px;
  font-weight: bold;
  font-size: 0.85rem;
  color: #606266;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  white-space: nowrap;
}
.time-range {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.time-start, .time-end {
  display: inline-block;
}

.time-separator {
  margin: 0 2px;
  display: inline-block;
}

.timeline-content {
  flex: 1;
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: 85px; /* 与竖线对齐 */
  transform: translateX(-50%); /* 居中对齐到竖线上 */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2); /* 外发光效果 */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-dot i {
  color: white;
  font-size: 0.7rem;
}

.timeline-card {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 12px;
  margin-left: 20px; /* 与圆点保持一定距离 */
}
/* 时间线样式调整 */
.el-timeline {
  padding-left: 0;
  margin-top: 20px;
}

/* 卡片样式调整 */
.el-card {
  margin-bottom: 10px;
}


.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
}
.activity-header h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1rem;
}
.activity-header:hover {
  background-color: var(--light-gray);
}

.activity-summary {
  flex: 1;
  margin: 0 10px;
  font-size: 0.9rem;
  color: var(--text-light);
}
.collapse-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}
.el-tabs {
  margin-top: 15px;
}
.activity-details {
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  margin-top: 5px;
}

.activity-header h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1rem;
}

.activity-name {
  font-weight: bold;
  color: #666;
  font-size: 0.95rem;
  margin-left: 10px;
}

/* 景点详情样式 */
.attraction-details {
  margin-top: 10px;
}

.highlights {
  margin-bottom: 10px;
}

.highlights h4 {
  margin: 0 0 6px 0;
  color: #505050;
  font-size: 0.95rem;
}

.highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.highlight-tag {
  background-color: #e6f2ff;
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.attraction-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  background-color: var(--light-gray);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.info-item i {
  margin-right: 6px;
  color: var(--primary-color);
}

/* 提示内容 */
.tip-content {
  background-color: #fff9e6;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
}

.tip-content i {
  color: #faad14;
  margin-right: 8px;
  margin-top: 2px;
}

.tip-content p {
  margin: 0;
  flex: 1;
}

/* 选项卡样式 */
.options-container {
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tab {
  padding: 5px 8px;
  border-radius: 4px;
  background-color: var(--light-gray);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
}

.tab.active {
  background-color: var(--primary-color);
  color: white;
}

.option-details {
  background-color: var(--light-gray);
  border-radius: 6px;
  padding: 10px;
}

.option-row {
  display: flex;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.option-row:last-child {
  margin-bottom: 0;
}

.option-label {
  width: 50px;
  font-weight: bold;
  color: #666;
}

.option-value {
  flex: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-content {
    padding: 20px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .timeline:before {
    left: 65px;
  }

  .timeline-time {
    width: 65px;
    font-size: 0.8rem;
  }

  .cost-cards {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hero-banner {
    height: 320px;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .route-info {
    flex-direction: column;
  }

  .timeline:before {
    display: none;
  }

  .timeline-item {
    flex-direction: column;
    position: relative;
    margin-bottom: 25px; /* 增加项目之间的间距 */
  }

  .timeline-time {
    width: 100%;
    text-align: left;
    padding-right: 0;
    margin-bottom: 5px;
  }

  .timeline-dot {
    display: none;
  }

  .timeline-card {
    margin-left: 0;
  }
}
</style>